<template>
  <div>
    <el-dialog
      title="分配权限"
      :visible="isPernission"
      width="30%"
      @close="hClose"
    >
      <el-tree
        ref="tree"
        :data="list"
        show-checkbox
        :props="{ label: 'name' }"
        node-key="id"
        default-expand-all
        check-strictly
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="hClose">取 消</el-button>
        <el-button type="primary" @click="hPrimary">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { arrTree } from '@/utils'
import { getPermission } from '@/api/permission'
import { getRole, updateAssignRole } from '@/api/role'
import { Message } from 'element-ui'
export default {
  props: {
    isPernission: {
      type: Boolean,
      required: true
    },
    roleId: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      list: []
    }
  },
  created() {
    this.getDepartmentList()
  },
  methods: {
    // 数据回显
    async dataEcho() {
      const res = await getRole(this.roleId)
      // 数据回显
      this.$refs.tree.setCheckedKeys(res.data.permIds)
    },
    // 确认
    async hPrimary() {
      // 获取复选框的 key 值
      const keys = this.$refs.tree.getCheckedKeys()
      await updateAssignRole({ id: this.roleId, permIds: keys })
      // console.log(res)
      // 提示用户
      Message.success('分配权限成功')
      // 关闭弹窗
      this.hClose()
    },
    // 获取部门负责人列表
    async getDepartmentList() {
      const res = await getPermission()
      //   console.log(res.data)
      // 将获取的平铺数据转换为树型结构数据
      this.list = arrTree(res.data, 0)
    },
    // 取消
    hClose() {
      this.$emit('update:isPernission', false)
    }
  }
}
</script>

<style>

</style>
